<template>
  <view :class="TokenList.length == 0 ?'tokenContent bgColor':'tokenContent'">
    <scroll-view
      style="height:100vh"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      refresher-background="#f6f6f6"
      :refresher-threshold="50"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh">
      <view class="topCard">
        <text
          :class="routerType == 'notUse' ? 'txt' : 'txt1'"
          @click.stop="getNotUseToken"
          >未使用</text
        >
        <text
          :class="routerType == 'use' ? 'txt' : 'txt1'"
          @click.stop="getUseToken"
          >已使用</text
        >
        <text
          :class="routerType == 'past' ? 'txt' : 'txt1'"
          @click.stop="getPastToken"
          >已过期</text
        >
      </view>
			<NoneData v-if="TokenList.length == 0"></NoneData>
      <view class="tokenList">
        <view
          :class=" routerType === 'notUse' ? 'goodcard' : 'goodcard1'"
          v-for="item in TokenList"
          :key="item.id">
          <view class="renderContent">
            <view class="one">
              <view class="title">{{ item.consumeNum }}{{ $tokenName }}</view>
              <view class="subTitle">兑换券</view>
            </view>
            <view class="two">
              <view class="name">{{ item.commodityName }}</view>
              <view
                class="date"
                v-if="routerType === 'notUse'"
                >有效期至：{{ item.expiringDate | useTime }}</view
              >
              <view
                class="date"
                v-if="!routerType === 'notUse'"
                >有效期</view
              >
            </view>
            <view class="three">
              <view
                class="btnBox"
                v-if="routerType === 'notUse'">
                <view
                  class="btn"
                  @click.stop="showCode(item.id)"
                  >去使用</view
                >
              </view>
              <view
                class="imgBox"
                v-if="routerType === 'use'">
                <image
                  class="used"
                  src="/static/my/used.png"
                  lazy-load="false">
                </image>
              </view>
              <view
                class="imgBox"
                v-if="routerType === 'past'">
                <image
                  class="used"
                  src="/static/my/past.png"
                  lazy-load="false">
                </image>
              </view>
            </view>
          </view>
        </view>
        <view
          v-if="haMore"
          style="text-align: center; color: #999; padding-bottom: 10rpx">
          正在加载...
        </view>
        <view
          v-if="!haMore && TokenList.length != 0"
          style="text-align: center; color: #999; padding-bottom: 10rpx">
          没有更多了
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    getNotTokenList,
    getUsedTokenList,
    getPastTokenList
  } from '@/apis/my'
  import { parseTime1 } from '@/utils/index'
  export default {
    data() {
      return {
        routerType: 'notUse',
        TokenList: [],
        memberId: '',
        page: {
          pageNum: 1,
          pageSize: 10
        },
        triggered: false,
        nextPage: 1,
        isEmpty: false,
        haMore: false
      }
    },
    filters: {
      useTime(time) {
        return parseTime1(time)
      }
    },
    computed:{
      $tokenName(){
        return this.$config.tokenName
      }
    },
    onLoad(option) {
      this.routerType = option.type
      this.memberId = option.memberId
    },
    onShow() {
      this.getNotUseToken()
    },
    methods: {
      getToken(type) {
        this.routerType = type
      },
      async getNotUseToken() {
				// this.TokenList = [];
        this.routerType = 'notUse'
        this.page.pageSize = 10
        this.page.pageNum = 1
        this.getTokenList(1, 10)
      },
      async getUseToken() {
				// this.TokenList = [];
        this.page.pageSize = 10
        this.page.pageNum = 1
        this.routerType = 'use'
        this.getTokenList(1, 10)
      },
      async getPastToken() {
				// this.TokenList = [];
        this.page.pageSize = 10
        this.page.pageNum = 1
        this.routerType = 'past'
        this.getTokenList(1, 10)
      },

      async onRefresh() {
        this.triggered = true
        // 必须要在请求结束后才结束下拉的动画
        await this.getTokenList()
        this.triggered = false
      },
      // 监听用户是否滚动到页面底部
      onScrollToLower() {
        console.log('到底了...')
        // 如果没有更多数据，则不必发起请求
        console.log(this.haMore)
        if (!this.haMore) return uni.utils.toast('没有更多数据了')
        console.log(1111)
        this.getTokenList(this.nextPage)
      },
      async getTokenList(pageNum = 1, pageSize = 10) {
        if (this.routerType === 'notUse') {
          const res = await getNotTokenList({
            pageNum: pageNum,
            pageSize: pageSize,
            memberId: this.memberId
          })
          if (res.code === 200) {
            const data = res.data
            // 如果是第一页，则清空数据
            if (pageNum === 1) {
              this.TokenList = []
              // console.log('qingkongle ')
            }
            // 添加数据
            this.TokenList = [...this.TokenList, ...data.list]
            // 判断是否为空数组
            this.isEmpty = this.TokenList.length === 0
            // 计算下一页页码
            this.nextPage = ++data.pageNum
            // 判断是否还有下一页数据
            this.haMore = this.nextPage <= data.pages
            console.log(this.TokenList, 'TokenList')
          } else {
            // console.log(res)
            uni.utils.toast('获取列表失败')
          }
        } else if (this.routerType === 'use') {
          // console.log()
          const res = await getUsedTokenList({
            pageNum: pageNum,
            pageSize: pageSize,
            memberId: this.memberId
          })
          if (res.code === 200) {
            const data = res.data
            // 如果是第一页，则清空数据
            if (pageNum === 1) {
              this.TokenList = []
              // console.log('qingkongle ')
            }
            // 添加数据
            this.TokenList = [...this.TokenList, ...data.list]
            // 判断是否为空数组
            this.isEmpty = this.TokenList.length === 0
            // 计算下一页页码
            this.nextPage = ++data.pageNum
            // 判断是否还有下一页数据
            this.haMore = this.nextPage <= data.pages
            console.log(this.TokenList, 'TokenList')
          } else {
            // console.log(res)
            uni.utils.toast('获取列表失败')
          }
        } else if (this.routerType === 'past') {
          const res = await getPastTokenList({
            pageNum: pageNum,
            pageSize: pageSize,
            memberId: this.memberId
          })
          if (res.code === 200) {
            const data = res.data
            // 如果是第一页，则清空数据
            if (pageNum === 1) {
              this.TokenList = []
              // console.log('qingkongle ')
            }
            // 添加数据
            this.TokenList = [...this.TokenList, ...data.list]
            // 判断是否为空数组
            this.isEmpty = this.TokenList.length === 0
            // 计算下一页页码
            this.nextPage = ++data.pageNum
            // 判断是否还有下一页数据
            this.haMore = this.nextPage <= data.pages
            console.log(this.TokenList, 'TokenList')
          } else {
            // console.log(res)
            uni.utils.toast('获取列表失败')
          }
        }
      },
      showCode(id) {
        console.log(id)
        uni.navigateTo({
          url: '/packageB/pages/redeemCode/redeemCode?' + 'id=' + id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
	.bgColor{
		background-color: #ffffff !important;
	}
  .tokenContent {
    height: 100vh;
    background-color: #f6f6f6;
    .topCard {
      height: 108rpx;
      display: flex;
      justify-content: space-between;
      padding-top: 40rpx;
      padding-right: 40rpx;
      padding-left: 40rpx;
      // margin: 0 40rpx;
      border-bottom: 2rpx solid #d9d9d9;
      // border-radius: 2rpx;
      .txt {
        // width: 216rpx;
        height: 62rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #1a1a1a;
        line-height: 44rpx;
        padding: 0 10rpx;
        // border-bottom: 6rpx solid #7cca66;
        border-bottom: 6rpx solid #2f64ff;
        // border-radius: 6rpx 6rpx 6rpx 6rpx;
      }
      .txt1 {
        height: 44rpx;
        // width: 216rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #999999;
        padding: 0 10rpx;
        padding-bottom: 20rpx;
        line-height: 44rpx;
        // border-bottom: 2rpx solid #7cca66;
      }
    }
    .tokenList {
      padding: 40rpx;
      .goodcard {
        height: 170rpx;
        margin-bottom: 40rpx;
        width: 100%;
        position: relative;
        background-image: url('/static/my/blueCard.png');
        background-repeat: no-repeat;
        background-size: 100%  100%;
        // .tokenImg {
        //   height: 170rpx;
        //   width: 100%;
        //   position: absolute;
        //   float: left;
        //   top: 0;
        //   z-index: -1;
        // }
        .renderContent {
          height: 170rpx;
          display: flex;
          justify-content: space-between;
          // padding-right: 20rpx;
          .one {
            text-align: center;
            width: 204rpx;
            height: 170rpx;
            margin: 0 auto;
            // margin-right: 20rpx;
            // padding-left: 26rpx;
            padding-top: 38rpx;
            .title {
              font-size: 30rpx;
              font-weight: bold;
              color: #ffffff;
              margin-bottom: 20rpx;
            }
            .subTitle {
              font-size: 24rpx;
              font-weight: 500;
              color: #ffffff;
            }
          }
          .two {
            // margin-right: 20rpx;
            flex: 1;
            padding-top: 38rpx;
            // background-color: paleturquoise;
            padding-left: 20rpx;
            .name {
              font-size: 28rpx;
              font-weight: 500;
              color: #1a1a1a;
              margin-bottom: 20rpx;
            }
            .date {
              font-size: 24rpx;
              font-weight: 500;
              color: #999999;
            }
          }
          .three {
            // margin-right: 20rpx;
            width: 156rpx;
            height: 170rpx;
            // background-color: pink;
            // line-height: 170rpx;
            // display: flex;
            .btnBox {
              height: 170rpx;
              padding-top: 56rpx;
            }
            .btn {
              width: 124rpx;
              height: 60rpx;
              border-radius: 30rpx 30rpx 30rpx 30rpx;
              // border: 2rpx solid #7cca66;
              border: 2rpx solid #0934ff;
              font-size: 28rpx;
              line-height: 60rpx;
              text-align: center;
              font-weight: 500;
              // color: #8bcf78;
              color: #0934ff;
            }
            .imgBox {
              padding-top: 14rpx;
            }
            .used {
              width: 120rpx;
              height: 120rpx;
            }
          }
        }
      }
      .goodcard1 {
        height: 170rpx;
        margin-bottom: 40rpx;
        width: 100%;
        position: relative;
        background-image: url('/static/my/eeeCard.png');
        background-repeat: no-repeat;
        background-size: 100%  100%;
        // .tokenImg {
        //   height: 170rpx;
        //   width: 100%;
        //   position: absolute;
        //   float: left;
        //   top: 0;
        //   z-index: -1;
        // }
        .renderContent {
          height: 170rpx;
          display: flex;
          justify-content: space-between;
          // padding-right: 20rpx;
          .one {
            text-align: center;
            width: 204rpx;
            height: 170rpx;
            margin: 0 auto;
            // margin-right: 20rpx;
            // padding-left: 26rpx;
            padding-top: 38rpx;
            .title {
              font-size: 40rpx;
              font-weight: bold;
              color: #ffffff;
              margin-bottom: 20rpx;
            }
            .subTitle {
              font-size: 24rpx;
              font-weight: 500;
              color: #ffffff;
            }
          }
          .two {
            // margin-right: 20rpx;
            flex: 1;
            padding-top: 38rpx;
            // background-color: paleturquoise;
            padding-left: 20rpx;
            .name {
              font-size: 28rpx;
              font-weight: 500;
              color: #1a1a1a;
              margin-bottom: 20rpx;
            }
            .date {
              font-size: 24rpx;
              font-weight: 500;
              color: #999999;
            }
          }
          .three {
            // margin-right: 20rpx;
            width: 156rpx;
            height: 170rpx;
            // background-color: pink;
            // line-height: 170rpx;
            // display: flex;
            .btnBox {
              height: 170rpx;
              padding-top: 56rpx;
            }
            .btn {
              width: 124rpx;
              height: 60rpx;
              border-radius: 30rpx 30rpx 30rpx 30rpx;
              border: 2rpx solid #7cca66;
              font-size: 28rpx;
              line-height: 60rpx;
              text-align: center;
              font-weight: 500;
              color: #8bcf78;
            }
            .imgBox {
              padding-top: 14rpx;
            }
            .used {
              width: 120rpx;
              height: 120rpx;
            }
          }
        }
      }
    }
  }
</style>
